<template>
  <div id="my_team_sales">
    <div>
      <c-title :hide="false" text="团队销售额"></c-title>
    </div>
    <div class="screen">
      <div style="font-size: 14px;">搜索时间</div>
      <div style="display: flex; position: relative; font-size: 13px;" class="d-cc">
        <div @click="changeSlideDown()" style="display: flex; align-items: center;">
          <div>{{selectedTime == ''?dealdate(new Date()):selectedTime}}</div>
          <div class="iconfont icon-member-bottom" style="margin-left: 5px; font-size: 19px; margin-top: 4px;"></div>
        </div>
        <van-popup v-model="slideDown" position="bottom">
          <van-datetime-picker v-model="currentDate" type="year-month" title="选择年月" :min-date="minDate"
            :max-date="maxDate" :formatter="formatter" @confirm="changeSlideDown" @cancel="cancelTimePopover" />
        </van-popup>
      </div>
    </div>
    <div class="title">
      <div class="box">
        <div v-for="(item,index) in titleTop" :key="index" style="width: 55px;">{{item}}</div>
      </div>
      <div class="box">
        <div v-for="(item,index) in titleButton" :key="index" style="width: 55px; margin-top: 5px;">{{item}}</div>
      </div>
    </div>
    <div class="content">
      <div class="detailsList" v-for="(item,index) in teamSalesList" :key="index">
        <div class="d-c-c">
          <div style="width: 60px;">{{item.has_one_member && item.has_one_member.username}}</div>
          <div style="display: flex; margin-top: 5px; color: #7e7e7e;">
            <div>id:</div>
            <div style="margin-left: 3px;">{{item.uid}}</div>
          </div>
        </div>
        <div class="d-c-c">{{item.order_num}}</div>
        <div class="d-cc" v-if="item.team_sales_total>= 10000000">{{item.team_sales_total/10000}}w</div>
        <div class="d-cc" v-else>{{item.team_sales_total}}</div>
        <div class="d-cc" v-if="item.years_team_sales_total>= 10000000">{{item.years_team_sales_total/10000}}w</div>
        <div class="d-cc" v-else>{{item.years_team_sales_total}}</div>
      </div>
      <van-divider v-if="teamSalesList.length == 0">{{'暂无数据'}}</van-divider>
      <van-divider v-else style="margin-bottom: 12px;">{{'暂无更多'}}</van-divider>
    </div>
  </div>
</template>

<script>
  import my_team_sales_controller from "./my_team_sales_controller";
  export default my_team_sales_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  div {
    letter-spacing: 0.5px;
  }

  #my_team_sales {
    .screen {
      color: #2f2f2f;
      font-size: 14px;
      display: flex;
      align-items: center;
      margin: 10px;
      justify-content: space-between;
    }

    .title {
      padding: 10px;
      background-color: white;
      font-size: 13px;

      .box {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }

    .content {
      margin: 10px;
      font-size: 13px;

      .detailsList {
        background-color: white;
        padding: 10px;
        display: flex;
        align-content: center;
        justify-content: space-between;

        div {
          word-wrap: break-word;
          word-break: normal;
          width: 50px;
        }
      }

      .noMore {
        font-size: 12px;
        color: #7e7e7e;
        margin-top: 10px;
      }
    }
  }

  .d-c-c {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .d-cc {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  ::v-deep .van-cell {
    border-radius: 5px;
  }

  ::v-deep .van-button--primary {
    border: none;
    background-color: white;
    font-size: 13px;
    width: 100%;
    height: 20px;
    color: black;
    padding-left: 0;
  }

  ::v-deep .van-divider {
    font-size: 12px;
  }
</style>
